###
use table to render
###


class tree.ui.TreeView extends tree.ui.Widget
    constructor: () ->
        super
        @htmlelem = document.createElement 'ul'
        @htmlelem.className = 'tree-treeview'
        @data = {}
    
    set_data: (data) ->
        @data = data
        self = @
        create_elems = (data, keys) ->
            keys ?= []
            lis = []
            for key of data
                li = document.createElement 'li'
                span = document.createElement 'span'
                
                span.className = 'tree-treeview-item'
                
                span.innerHTML = key
                
                span.keys = tree.io.formats.json.dump keys.concat key
                
                span.onclick = () ->
                    if self.selected?
                        self.selected.className = 'tree-treeview-item'
                    @className = 'tree-treeview-item-selected'
                    self.selected = @
                    self.emit 'row-activated', {path : tree.io.formats.json.load @keys}
                
                table = document.createElement 'table'
                table.className = 'tree-treeview-cell'
                
                tb = document.createElement 'tbody'
                tr = document.createElement 'tr'
                tb.appendChild tr
                table.appendChild tb
                
                table.style.width = 'auto'
                table.style.height = 'auto'
                
                td1 = document.createElement 'td'
                td1.className = 'tree-treeview-button'
                
                td2 = document.createElement 'td'
                
                tr.appendChild td1
                tr.appendChild td2
                
                a = document.createElement 'a'
                li.appendChild table
                
                td1.appendChild a
                td2.appendChild span
                
                a.innerHTML = '&nbsp;'
                
                if data[key]
                    a.innerHTML = '+'
                    a.style.cursor = 'pointer'
                    ul = document.createElement 'ul'
                    ul.style.display = 'none'
                    
                    children = create_elems data[key], keys.concat [key]
                    for child in children
                        ul.appendChild child
                    
                    li.appendChild ul 
                    a.onclick = () ->
                        
                        if @parentNode.parentNode.parentNode.parentNode.parentNode.childNodes[1].style.display == 'none'
                            @innerHTML = '-'
                            for childNode in @parentNode.parentNode.parentNode.parentNode.parentNode.childNodes
                                if childNode.nodeName != 'UL'
                                    continue
                                    
                                childNode.style.display = 'block'
                            
                        else
                            @innerHTML = '+'
                            for childNode in @parentNode.parentNode.parentNode.parentNode.parentNode.childNodes
                                if childNode.nodeName != 'UL'
                                    continue
                                    
                                childNode.style.display = 'none'
                
                lis.push li
            
            return lis
        
        children = create_elems data
        for child in children
            @htmlelem.appendChild child
        
    
    show: () ->
        super @
        return @htmlelem
